<template>
    <div class="notify_detail">
        <group>
            <card>
                <div slot="header" class="header-notify">{{notify.title}} <span>{{notify.created_at | time}}</span></div>
                <div slot="content" style="padding: 15px;">
                    <p>{{notify.data}}</p>
                </div>
            </card>
        </group>
        <group>
        <x-button @click.native="deleteNotify" type="warn">删除</x-button>
    </group>
    </div>
</template>
<script>
    import {Group, Card, dateFormat, XButton} from 'vux'

    export default {
        components: {
            Group, 
                Card,
                XButton
        },
        data() {
            return {
                id: null,
                notify: {}
            }
        },
        filters: {
            time(val) {
                return dateFormat(val * 1000, "YYYY-MM-DD HH:mm:ss")
            }
        },
        created(){
            this.$store.commit("storeState", false)
            this.$store.commit("storeNotify", false)            
            this.fetch_notify()
        },
        methods: {
            fetch_notify() {
                let id = this.$route.params.id
                this.id = id
                this.$http.get('notifies/' + id + ".json" ).then(res => {
                    let data = res.data
                    if (data.code > 200) {
                        this.$router.push("/notify")
                    } else {
                        this.notify = data.notify
                    }
                })
            },
            deleteNotify() {
                this.$http.delete("notifies/" + this.id + ".json").then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        this.$router.push("/notify")
                    }
                })
            }
 
        }
    }

</script>
<style>
    .header-notify {
        color: #ccc;
        padding: 4px 10px;
    }
    .header-notify span {
        float: right;
    }
</style>
